<template>
  <a-modal
    :title="title"
    :visible="visible"
    width="360px"
    cancelText="取消"
    okText="确定"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <CommonForm ref="commonFormRef" :formData="formData" :formJson="formJson" />
  </a-modal>
</template>

<script>
import { addRole, editRoleById , getRoleMap } from "@/api/system/role"
import CommonForm from "@/components/CommonForm"
import { defaultStoreData } from "@/views/dashboard/EditDashboard/LowCode/lib/const"
import { message } from 'ant-design-vue'
import { foreachTree } from '@/utils/util'

const formData = {
  name: '',
  parentId: undefined,
  show: 1,
  path: ''
}
export default {
  components: {
    CommonForm
  },
  data() {
    return {
      visible: false,
      formData: {
        ...formData
      },
      parentData: [],
      title: "新增",
      type: 'add',
      isIconShow: false,
      roleOptions: []
    }
  },
  computed: {
    formJson() {
      const {
        type,
        formData,
        roleOptions
      } = this

      foreachTree(roleOptions, node => {
        node.disabled = formData.id === node.id
      })
      const disabled = type === 'details'
      return [
        {
          type: "input",
          label: "角色名称",
          fieldName: "name",
          extraConfig: {
            className: "row",
            disabled
          },
          rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          dataType: String
        },
        {
          type: "tree-select",
          label: "上级角色",
          fieldName: "parentId",
          extraConfig: {
            className: "row",
            treeData: roleOptions,
            replaceFields: {
              children: 'children',
              title: 'name',
              key: 'id',
              value: 'id'
            },
            disabled
          },
          dataType: Number
        },
        {
          type: "number",
          label: "角色排序",
          fieldName: "serialNum",
          extraConfig: {
            className: "row",
            disabled
          },
          rules: [{ required: true, message: '角色排序不能为空', trigger: 'blur' }],
          dataType: String
        },
        {
          type: "textarea",
          label: "角色备注",
          fieldName: "describe",
          extraConfig: {
            className: "row",
            disabled
          },
          dataType: String
        },
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleOk() {
      if (this.type === 'add'){

      }
      else if (this.type === 'details') {
        this.handleCancel()
        return false
      }
      const callBack = this.type === 'add' ? addRole : editRoleById
      console.log(this.$refs.commonFormRef)
      this.$refs.commonFormRef.form.validate(valid => {
        if (valid){
          callBack({
            ...this.formData,
            parentId: this.formData.parentId ? this.formData.parentId : 0
          })
          .then(data => {
            this.handleCancel()
            this.$message.success(`${this.title}成功`)
          })
        }
      })
    },
    handleCancel(){
      this.visible = false
      this.formData = {
        ...formData
      }
      this.$emit("update")
    },
    show(type = 'add', val = { }) {
      this.type = type
      val.parentId = val.parentId === 0 ? undefined : val.parentId
      switch (type) {
        case 'add': {
          this.title = '新增'
          this.formData = {
            ...formData
          }
          break
        }
        case 'edit': {
          this.title = '编辑'
          this.formData = {
            ...val
          }
          break
        }
        case 'details': {
          this.title = '详情'
          this.formData = {
            ...val
          }
          break
        }
        default : {
          this.title = '新增'
          this.type = 'add'
        }
      }

      this.visible = true
      console.log(this.formData)
    },
    getData() {
      getRoleMap()
      .then((data) => {
        this.roleOptions = data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
